<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Swiper demo</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
		<!-- Link Swiper's CSS -->
		<link rel="stylesheet" href="../css/swiper.min.css">

		<!-- Demo styles -->
		<style>
			html,
			body {
				position: relative;
				height: 100%;
			}

			body {

				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				font-size: 14px;
				color: #000;
				margin: 0;
				padding: 0;
			}

			.swiper-container {
				width: 100%;
				height: 300px;
				margin-left: auto;
				margin-right: auto;
			}

			.swiper-slide {
				background-size: cover;
				background-position: center;
			}

			.gallery-top {
				height: 80%;
				width: 100%;
			}

			.gallery-thumbs {
				height: 20%;
				box-sizing: border-box;
				padding: 10px 0;
			}

			.gallery-thumbs .swiper-slide {
				width: 25%;
				height: 100%;
				opacity: 0.4;
			}

			.gallery-thumbs .swiper-slide-active {
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<!-- Swiper -->
		<div class="swiper-box" style="width: 330px;height: 315px;margin: 0 auto;">
			<div class="swiper-container gallery-top">
				<div class="swiper-wrapper">
					<div class="swiper-slide" style="background-image: url(../images/1.jpg);"></div>
					<div class="swiper-slide" style="background-image: url(../images/2.jpg);"></div>
					<div class="swiper-slide" style="background-image: url(../images/3.jpg);"></div>
					<div class="swiper-slide" style="background-image: url(../images/4.jpg);"></div>
					<div class="swiper-slide" style="background-image: url(../images/5.jpg);"></div>
				</div>
				<!-- Add Arrows -->
				<div class="swiper-button-next swiper-button-white"></div>
				<div class="swiper-button-prev swiper-button-white"></div>
			</div>
			<div class="swiper-container gallery-thumbs">
				<div class="swiper-wrapper">
					<div class="swiper-slide" style="background-image: url(../images/1.jpg);"></div>
					<div class="swiper-slide" style="background-image: url(../images/2.jpg);"></div>
					<div class="swiper-slide" style="background-image: url(../images/3.jpg);"></div>
					<div class="swiper-slide" style="background-image: url(../images/4.jpg);"></div>
					<div class="swiper-slide" style="background-image: url(../images/5.jpg);"></div>
				</div>
			</div>
		</div>

		<!-- Swiper JS -->
		<script src="../js/swiper.min.js"></script>

		<!-- Initialize Swiper -->
		<!-- Initialize Swiper -->
		<script>
			var galleryTop = new Swiper('.gallery-top', {
				nextButton: '.swiper-button-next',
				prevButton: '.swiper-button-prev',
				spaceBetween: 10,
			});
			var galleryThumbs = new Swiper('.gallery-thumbs', {
				spaceBetween: 10,
				//centeredSlides: true,
				slidesPerView: 'auto',
				touchRatio: 0.2,
				slideToClickedSlide: true
			});
			galleryTop.params.control = galleryThumbs;
			galleryThumbs.params.control = galleryTop;
		</script>
	</body>
</html>
